<template>
	<view>
		<canvas canvas-id="myCanvas" class="myCanvas" id="myCanvas" style="width:220px;height:115px"></canvas>
	</view>
</template>

<script>
	export default {
		props: {
			percent: {
			  type: [String, Number],
			  default: 1
			}
		},
		watch: {
			percent:{
				handler(){
					this.drawOn()
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				flag: false,
				w: 220,
				h: 115,
				dpr: 1,
				imgUrl: '',
			}
		},
		mounted(options) {
			this.drawOn()
		},
		methods: {
			// 模拟志愿
			drawOn() {
				const that = this
				const ctx = uni.createCanvasContext('myCanvas', this)
				this.drawInit(ctx)
				ctx.draw(false, () => {
					// setTimeout(() => {
					// 	uni.canvasToTempFilePath({
					// 		canvasId: 'myCanvas',
					// 		destWidth: that.w,
					// 		destHeight: that.h,
					// 		success: function(res) {
					// 			that.imgUrl = res.tempFilePath
					// 		},
					// 		fail: function(res) {}
					// 	}, this);
					// }, 200)
				})
			},
			drawInit(ctx) {
				const {
					w,
					h,
					dpr
				} = this
				var circle = {
					x: w / 2,
					y: h,
					radius: (w / 2) - (dpr * 10)
				};
				ctx.clearRect(0, 0, w, h)
				this.drawBgLine(ctx, circle)
				this.drawPointer(ctx, circle)
				this.drawLine(ctx, circle)
				ctx.textAlign = "center";
				ctx.save();
				ctx.font = (dpr * 26) + "px Arial";
				ctx.fillStyle = '#36363A'
				const percent = this.percent || 0
				// const num = parseFloat((percent * 100).toFixed(2)) || '?'
				const num = Math.round((percent * 100)) || '?'
				ctx.fillText(num + '%', (w / 2), h - (10 + 26)); //绘制截取部分
				// ctx.fillText(num +'%', (w / 2), h - (26 + (dpr * 14 ) + 10)); //绘制截取部分
				ctx.restore();
				ctx.save();
				ctx.font = (dpr * 14) + "px Arial";
				ctx.fillStyle = '#9899A1'
				ctx.fillText('录取概率', (w / 2), h - 10); //绘制截取部分
				ctx.restore();
			},
			// 背景线条
			drawBgLine(context, circle) {
				context.beginPath();
				context.save();
				context.strokeStyle = '#F5F5FA';
				context.lineWidth = (this.dpr * 12)
				context.setLineDash([(this.dpr * 45), (this.dpr * 8)], 0);
				context.arc(circle.x, circle.y, circle.radius, 1 * Math.PI, 0, false);
				context.stroke();
				context.restore();
			},
			// 渐变线条
			drawLine(context, circle) {
				context.beginPath();
				context.save();
				const grd = context.createLinearGradient(0, 0, circle.x, circle.y)
				grd.addColorStop(0, '#FFBC44')
				grd.addColorStop(0.5, '#C9E031')
				grd.addColorStop(1, '#00C15D')
				context.strokeStyle = grd
				context.lineWidth = (this.dpr * 12)
				context.setLineDash([(this.dpr * 45), (this.dpr * 8)], 0);
				const num = (this.percent || 1) + 1
				context.arc(circle.x, circle.y, circle.radius, 1 * Math.PI, num * Math.PI, false);
				context.stroke();
				context.restore();
			},
			// 细线条
			drawPointer(context, circle) {
				context.save();
				context.beginPath()
				context.arc(circle.x, circle.y, circle.radius - (this.dpr * 12) - 10, 1 * Math.PI, 0, false)
				context.lineWidth = (this.dpr * 12)
				context.setLineDash([(this.dpr * 1), (this.dpr * 9)], 0);
				context.strokeStyle = '#00C15D'
				context.stroke()
				context.restore();
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>